<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/login.css"/>
<script language="JavaScript">

			
			window.onload=function(){
				var imgArr = ["url(img/1.png)" , "url(img/2.png)" , "url(img/3.png)" , "url(img/4.png)" ,"url(img/5.png)"];
				var pre  = document.getElementById("pre");
				var next = document.getElementById("next");
				var background  = document.getElementById("background");
				var index=0;
				pre.onclick=function()
				{
					//alert("1");
					index--;
					if(index<0)index=4;
					background.style.backgroundImage = imgArr[index];
					
				}
				
				next.onclick=function()
				{
					
					index++;
					if(index>4)index=1;				
					background.style.backgroundImage = imgArr[index];
				}
				
				pre.onmouseover=function(){
					pre.src="img/hover_pre.png";
				}
				
				pre.onmouseout=function(){
					pre.src="img/pre.png";
				}
				
				next.onmouseover=function(){
					next.src="img/hover_next.png";
				}
				
				next.onmouseout=function(){
					next.src="img/next.png";
				}
				
				var change = document.getElementById("change");
				var register2 = document.getElementById("register2");
				var register = document.getElementById("register");
				change.onclick=function(){
					//alert("1");
					register.style.display="none";
					register2.style.display="";
				}
				
				var change2=document.getElementById("change2");
				change2.onclick=function(){
					//alert("1");
					register.style.display="";
					register2.style.display="none";
				}
				/*var uemail=document.getElementById("uemail");
				    uemail.οnblur=function(){
				        if(uemail.value){
				            uemail.setCustomValidity("");//现将有输入时的提示设置为空
				        }else if(uemail.validity.valueMissing){
				            uemail.setCustomValidity("请输入账号");  
				        }	
				}*/
				var timer;
				//创建一个函数，用来开启自动切换图片
				function autoChange(){
					
					//开启一个定时器，用来定时去切换图片
					timer = setInterval(function(){
						
						//使索引自增
						index++;				
						//判断index的值
						index %= imgArr.length;
						background.style.backgroundImage = imgArr[index];
						
					},4000);
					
				}
				autoChange()
			}
</script>
</head>
<body>
<header>
    <jsp:include page="head2.jsp" ></jsp:include>
    <br /><br /><br /><br /><br />
</header> 
    <div id="background" class="outer">
			<div class="register">

				<form id="register">
					<img src="img/change.png" usemap="#changeMap" class="change">
					<map name="changeMap">
						<area shape="poly" coords="125,2,175,49,186,1" href="#" id="change">
					</map>
					<br /><br />
					<h2 class="login_title" id="login_title">手机扫码 安全登录</h2><br /><br /><br /><br />
					<img src="img/scan.png"><br><br><br><br>
					打开&nbsp;<a href="#" class="click">使用QQ或微信</a>&nbsp;扫一扫登录<br><br>
					${requestScope.register_message }
					<a href="#" class="click2">密码登录</a>&nbsp;&nbsp;
					<a href="register.jsp" class="click2">注册新帐号</a>
					
				</form>

				<form action="UserServlet" method="post" id="register2" style="display:none ; ">
					<img src="img/change2.png" usemap="#change2Map" class="change" />
					<map name="change2Map">
						<area shape="poly" coords="8,6,70,8,65,64" href="#" id="change2">
					</map>
					<br><br><br>
					<h2 class="login_title2" id="login_title2">QQ帐号登录</h2><br />
					<div class="email">
						<input type="text" style="border:none;" class="email_text" name="username" required="required" id="uemail"placeholder="QQ账号或手机号码">
					</div>
					<div class="password">
						<input type="password" style="border:none;" class="password_text" name="password" required="required" placeholder="输入密码"/>
					</div>
					<p style="color=red;">${requestScope.register_message }</p>
					<br />
					<input type="submit" class="submit" value="登&nbsp;陆" ><br><br><br><br><br><br><br><br>
				</form>
				<a href="#"><img src="img/advert.png" class="advert"></a>
			</div>
			<a href="#"><img src="img/pre.png" id="pre" class="col1"></a>
			<a href="#"><img src="img/next.png" id="next" class="col2"></a>
		</div>
    
</body>
</html>